<template>
  <div class="el-naigation">
    <el-menu
      :default-active="ActiveIndex"
      class="el-menu-demo"
      :mode='hori'
      @select="handleSelect"
      :background-color="Background"
      :text-color="Text"
      :active-text-color="ActiveText"
    >
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-menu-item index="2" :disabled='Disabled'>消息中心</el-menu-item>
      <el-menu-item index="3"><a href="javascript:;" :target="Target">订单管理</a></el-menu-item>
    </el-menu>
  </div>
</template>
<script>
 module.exports = {
   data() {
      return {
       
      }
   },
   props:{
      //模式
     hori:{
        type:String,
        default:'horizontal'
     },
     //选择索引  唯一标志 index
     ActiveIndex:{
        type:String,
        default:'1'
     },
     //背景色
     Background:{
        type:String,
        default:'#545c64'
     },
     //字体颜色
      Text:{
         type:String,
         default:'#fff'
      },
      //选择字体颜色
      ActiveText:{
         type:String,
         default:'#ffd04b'
      },
      //是否禁用
      Disabled:{
         type:Boolean,
         default:true
      },
      //新窗口打开
      Target:{
         type:String,
         default:''
      }
   },
   methods: {
       handleSelect(key, keyPath) {
      //   console.log(key, keyPath);
        let params = { key,keyPath }
        this.$emit('handleselect',params)
      }
   },
}
</script>